<template>
  <div>
    <div style="display:flex;flex-direction:row-reverse;margin-top:10px">
      <el-button :loading="saveLoading" size="mini" type="primary" @click="submitForm">保存</el-button>
    </div>
    <div style="margin-top:20px" class="qup-title-box"><span class="border" /><span>卖场测绘详情</span></div>
    <map-detail :detail-data="id" />
    <div class="qup-title-box"><span class="border" /><span>测绘数据</span></div>
    <map-detail-1 :detail-data="detailData" />
    <c-section title="复尺数据">
      <c-list :column="3">
        <c-list-item label="复尺申请时间" :value="detailData.resurveyApplyTime" />
        <c-list-item label="复尺申请人" :value="detailData.resurveyApplicantName" />
        <c-list-item label="复尺人姓名" :value="detailData.resurveyorName" />
        <c-list-item label="复尺人电话" :value="detailData.resurveyorPhone" />
        <c-list-item label="预计复尺时间" :value="detailData.expectResurveyTime" />
      </c-list>
      <c-list :column="1">
        <c-list-item label="复尺申请说明" :value="detailData.resurveyApplyDesc" />
      </c-list>
    </c-section>
    <el-form
      ref="refForm"
      :rules="formRules"
      :model="formData"
      size="mini"
      label-width="150px"
    >
      <el-row>
        <el-col :span="8">
          <el-form-item label="是否已完成复尺:" prop="isFinishResurvey">
            <el-select
              v-model="formData.isFinishResurvey"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option label="是" :value="1" />
              <el-option label="否" :value="0" />
            </el-select>
          </el-form-item>
        </el-col>

      </el-row>
      <el-row v-show="formData.isFinishResurvey===1">
        <el-col :span="8">
          <el-form-item label="实际复尺时间:" prop="actualResurveyTime">
            <el-date-picker
              v-model="formData.actualResurveyTime"
              type="date"
              disabled
              :picker-options="pickerOptions"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期"
              @change="changeActualTime"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="本次复尺面积:" prop="currentResurveyArea">
            <el-input v-model.number="formData.currentResurveyArea" maxlength="4">
              <span slot="suffix">㎡</span>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-show="formData.isFinishResurvey===0">
        <el-col :span="24">
          <el-form-item label="未复尺原因:" prop="unresurveyReason">
            <el-input v-model="formData.unresurveyReason" type="textarea" maxlength="1000" show-word-limit />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="qup-title-box"><span class="border" /><span>附件管理</span></div>
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="附件上传" name="first">
        <el-button size="mini" type="primary" @click.native="handleAddFile">新增</el-button>
        <el-button size="mini" type="primary" @click="handleDelete">删除</el-button>
        <file-detail
          type="selection"
          style="margin-top:20px"
          :file-data="fileDataList"
          @select="getSelectData"
          @change="changeFile"
        />
        <add-file v-if="showFileAdd" ref="formDlg" attachment-type="复尺结果" :visible.sync="showFileAdd" @success="onSuccess" />
      </el-tab-pane>
      <el-tab-pane label="附件查看" name="second">
        <file-detail
          style="margin-top:20px"
          :file-data="otherFileList"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import addFile from '../fileAddDlg.vue'
import fileDetail from '../fileDetail.vue'
import { getDetailData, saveState } from '@/api/shopMap'
import mapDetail from '../mapDetail.vue'
import { getShopAttachment } from '@/api/common.js'
import mapDetail1 from '../mapDetail1.vue'
import BackPageMixin from '@/mixins/backPage'
import { nowTime } from '@/utils/tool'
export default {
  name: 'ReMapExe',
  components: { addFile, mapDetail, fileDetail, mapDetail1 },
  mixins: [BackPageMixin],
  props: {
  },
  data() {
    return {
      id: '',
      nowTime,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        } },
      showFileAdd: false,
      activeName: 'first',
      fileLength: 0, // 附件长度
      saveLoading: false,
      fileList: [],
      fileDataList: [], // 附件列表信息
      isNeedFile: false, // 是否需要复尺附件
      otherFileList: [],
      formData: {
        id: '',
        constCode: '',
        state: '',
        surveyBatchCode: '',
        isFinishResurvey: 0,
        actualResurveyTime: '',
        currentResurveyArea: '',
        unresurveyReason: '',
        shopAttachmentDTOList: []
      },
      formRules: {
        isFinishResurvey: [
          { required: true, message: '请选择是否完成复尺', trigger: 'change' }
        ],
        actualResurveyTime: [
          { required: false, message: '请选择实际复尺时间', trigger: 'change' }
        ],
        currentResurveyArea: [
          { required: false, message: '请填写本次复尺面积', trigger: 'change' },
          { pattern: /^[0-9]+$/, message: '只能输入数字' }
        ],
        unresurveyReason: [
          { required: true, message: '请填写未复尺原因', trigger: 'change' }
        ]
      },
      detailData: {}, // 测绘详情
      tableSelected: [] // 当前所选中表格行数据
    }
  },
  computed: {
    selectedFileIds() {
      return this.fileList.map(row => {
        return row.id
      })
    }
  },
  watch: {
    'formData.isFinishResurvey'(v) {
      if (v === 0) {
        // 未完成复尺
        this.isNeedFile = false
        this.formRules.actualResurveyTime[0].required = false
        this.formRules.currentResurveyArea[0].required = false
        this.formRules.unresurveyReason[0].required = true
      } else {
        this.formData.actualResurveyTime = this.nowTime()
        // 完成复尺
        this.isNeedFile = true
        this.formRules.actualResurveyTime[0].required = true
        this.formRules.currentResurveyArea[0].required = true
        this.formRules.unresurveyReason[0].required = false
      }
    },
    deep: true
  },
  created() {
    this.id = this.$route.query.id
    getDetailData(this.id).then(res => {
      this.getFiles()// 获取文件列表信息
      this.formData.id = this.id
      if (res.success === 1) {
        this.detailData = res.data
        this.formData.surveyBatchCode = res.data.surveyBatchCode
        this.formData.constCode = res.data.constCode
        this.formData.state = res.data.state
      }
    })
  },
  methods: {
    changeFile(length) {
      this.fileLength = length
    },
    // 获取附件
    getFiles() {
      getShopAttachment(this.id).then(res => {
        res.data.map(el => {
          if (el.attachmentType === '复尺执行') this.fileDataList.push(el)
          else this.otherFileList.push(el)
        })
        this.fileLength = this.fileDataList.length
      })
    },
    getSelectData(data) {
      if (data) {
        this.fileList = data
      }
    },
    changeActualTime(data) {
      if (data) {
        this.formData.isFinishResurvey = 1
        this.formRules.actualResurveyTime[0].required = true
        this.formRules.currentResurveyArea[0].required = true
        this.formRules.unresurveyReason[0].required = false
      } else {
        this.formData.isFinishResurvey = undefined
        this.formRules.actualResurveyTime[0].required = false
        this.formRules.currentResurveyArea[0].required = false
        this.formRules.unresurveyReason[0].required = true
      }
    },
    // 新增附件
    onSuccess(data) {
      this.fileDataList = [...this.fileDataList, ...data]
      this.refreshFileData()
    },
    // 新增附件上传
    handleAddFile() {
      this.showFileAdd = true
    },
    // 删除附件
    handleDelete() {
      if (!this.singleJudge(this.selectedFileIds, '删除文件', false)) {
        return
      }
      const flag = this.fileDataList.filter(item => {
        const index = this.selectedFileIds.findIndex(i => i === item.id)
        return index === -1
      })
      this.fileDataList = flag
    },
    refreshFileData() {
      // 重新请求接口获取附件信息
    },
    submitForm() {
      this.$refs['refForm'].validate((valid) => {
        if (valid) {
          if (this.formData.isFinishResurvey === 1) { // 复尺完成时 必须上传复尺结果附件
            this.formData.unresurveyReason = ''
            // const tempArr = this.fileDataList.filter(row => row.attachmentType === '复尺结果')
            if (this.fileLength !== 0) this.isNeedFile = false
            else this.isNeedFile = true
          } else {
            this.formData.actualResurveyTime = ''
            this.formData.currentResurveyArea = 0
          }
          if (this.isNeedFile === true) {
            this.$message.warning('请上传复尺结果附件')
            return
          }
          this.saveLoading = true
          this.formData.shopAttachmentDTOList = [...this.fileDataList, ...this.otherFileList]
          // console.log('复尺申请', this.formData)
          // return
          saveState(this.formData).then(res => {
            if (res.success === 1) {
              this.$message({
                message: '操作成功',
                type: 'success'
              })
              this.$store.dispatch('views/goBack')// 返回列表页
              this.saveLoading = false
            }
          }).catch(() => {
            this.saveLoading = false
          })
        } else {
          this.$message.warning('还有未填报的信息')
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/ .el-breadcrumb__inner{
    color: $qup-color-primary;
  }
</style>
